<template>
	<div class="my-info">
		<nav-bar title="消息提醒" :custom-back="true" @on-back="handleBack" />
		<div class="info-inner">
			<!-- 头像上传 -->
			<div class="avatar-wrapper">
				<van-image :src="newUserPhoto || '/static/images/default-avatar.png'" round width="96px" height="96px"
					@click="chooseImg" />
				<div class="upload-tip">点击上传头像</div>
			</div>

			<!-- 个人信息 -->
			<van-cell-group>
				<van-field label="姓名" :value="name" readonly input-align="right" />
				<van-field label="单位" value="河北省人民检察院" readonly input-align="right" />
				<van-field label="部门" :value="dept" readonly input-align="right" />
			</van-cell-group>
		</div>

		<!-- 图片上传动作面板 -->
		<van-action-sheet v-model="showUpload" :actions="uploadActions" @select="onUploadSelect" cancel-text="取消" />
	</div>
</template>

<script>
	import NavBar from '@/components/NavBar'
	import {
		getUserById,doUploadBatchFile,modifyPhoto
	} from "@/api/mineInfo.js"
	import {
		Toast
	} from 'vant'

	export default {
		name: 'UserInfo',
		components: {
			NavBar
		},
		data() {
			return {
				userPhoto: '',
				newUserPhoto: '',
				userHeadInfo: [],
				name: '',
				dept: '',
				showUpload: false,
				uploadActions: [{
						name: '拍照',
						value: 'camera'
					},
					{
						name: '从相册选择',
						value: 'album'
					}
				],
				user: []
			}
		},

		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
			this.getUserInfo()
		},

		methods: {
			handleBack() {
				this.$router.push('/mine')
			},
			getUserInfo() {
				getUserById({
						openSessionId: this.user.openSessionId,
						id: this.user.id
					})
					.then(res => {
						if (res.code === 200) {
							this.name = res.data.user.uUsername
							this.dept = res.data.user.uDepartName
							this.newUserPhoto = res.data.user.uPhoto
						} else if ([300, 301].includes(res.code)) {
							this.$router.push('/login')
						} else {
							Toast.fail(res.message)
						}
					})
					.catch(err => {
						console.log(err)
						Toast.fail('获取用户信息失败');
					})
			},

			chooseImg() {
				this.showUpload = true
			},

			async onUploadSelect(action) {
				this.showUpload = false

				Toast.loading({
					message: '上传中...',
					forbidClick: true
				})

				// 选择图片
				const file = await this.chooseImage(action.value)
				console.log(file)
				// 上传图片
				const formData = new FormData()
				formData.append('file', file)
				await doUploadBatchFile(formData)
					.then(res => {
						console.log(res)
						if (res.code === 200) {
							this.userHeadInfo = res.data
							this.updateUserPhoto()
						} else {
							
							Toast.fail(res.message)
						}
					})
					.catch(err => {
						console.log(err)
						Toast.fail('上传失败');
					})

			},

			// 选择图片
			chooseImage(sourceType) {
				return new Promise((resolve, reject) => {
					const input = document.createElement('input')
					input.type = 'file'
					input.accept = 'image/*'
					input.onchange = (e) => {
						resolve(e.target.files[0])
					}
					input.click()
				})
			},

			// 更新用户头像
			updateUserPhoto() {
				modifyPhoto({
						openSessionId: this.user.openSessionId,
						photo: this.userHeadInfo[0].accessPath
					})
					.then(res => {
						if (res.code === 200) {
							console.log(res)
							Toast.success(res.message)
							this.newUserPhoto = this.userHeadInfo[0].accessPath
						} else {
							console.log(res)
							Toast.fail(res.message)
						}
					})
					.catch(err => {
						console.log(err)
						Toast.fail('更新头像失败')
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-info {
		min-height: 100vh;
		background: #f5f5f5;


		.info-inner {
			padding: 15px;
			background: #fff;

			.avatar-wrapper {
				text-align: center;
				padding: 20px 0;
				margin-top: 55px;

				.upload-tip {
					margin-top: 10px;
					font-size: 12px;
					color: #5277E0;
				}
			}
		}
	}

	// 覆盖 Vant 样式
	:deep(.van-field__label) {
		width: 60px;
	}

	:deep(.van-field__control--right) {
		text-align: left;
	}
</style>